import React, { useState } from "react";
const getTotalvalue = (data: any, visibility: any) => {
  return data
    .reduce((sum: any, item: any) => {
      if (visibility[item.span]) {
        return sum + parseFloat(item.value);
      } else {
        return sum + 0;
      }
    }, 0)
    .toFixed(2);
};

function calculatePercentages(data: any[], visibility: any) {
  const totalValue: any = getTotalvalue(data, visibility);
  return data.map((item) => ({
    ...item,
    bfb: ((parseFloat(item.value) / totalValue) * 100).toFixed(2),
  }));
}

const ComponentName: React.FC = () => {
  const [visibility, setVisibility] = useState<Record<string, boolean>>({
    Export: true,
    Use: true,
    Solar: true,
    Gen: true,
    Battery: true,
    Grid: true,
  });

  const systemProductionData = {
    legend: ["Export", "Use"],
    label: "System Production",
    data: [
      {
        icon: "Grid",
        span: "Export",
        value: "6.42",
        color: "#169898",
        name: "System Production",
        unit: "kWh",
      },
      {
        icon: "home",
        span: "Use",
        value: "6.42",
        color: "#7DC058",
        name: "Consumption",
        dw: ".png",
        unit: "kWh",
      },
    ],
  };

  const consumptionData = {
    legend: ["Solar", "Gen", "Battery", "Grid"],
    label: "Consumption",
    data: [
      {
        icon: "Solar",
        value: "6.42",
        color: "#A04A25",
        name: "System Production",
        unit: "kWh",
        span: "Solar",
      },
      {
        icon: "Gen",
        value: "6.42",
        color: "#254FA0",
        name: "Consumption",
        unit: "kWh",
        span: "Gen",
      },
      {
        icon: "dianchi",
        value: "6.42",
        color: "#2B957B",
        name: "Consumption",
        unit: "kWh",
        span: "Battery",
      },
      {
        icon: "Grid",
        value: "6.42",
        color: "#431870",
        name: "Consumption",
        unit: "kWh",
        span: "Grid",
      },
    ],
  };

  const handleLegendClick = (legendItem: string) => {
    setVisibility((prev) => ({
      ...prev,
      [legendItem]: !prev[legendItem],
    }));
  };

  const filteredSystemProduction = calculatePercentages(
    systemProductionData.data,
    visibility
  ).filter((item, index) => visibility[systemProductionData.legend[index]]);

  const filteredConsumption = calculatePercentages(
    consumptionData.data,
    visibility
  ).filter((item, index) => visibility[consumptionData.legend[index]]);
  const totl1: any = getTotalvalue(systemProductionData.data, visibility);
  const totl2: any = getTotalvalue(consumptionData.data, visibility);

  return (
    <div className="CustomChart">
      <div className="CustomChart__chart">
        <div className="twoChart">
          {filteredSystemProduction.map((v: any) => (
            <div
              className="twoChart__item"
              style={{ background: v.color, height: v.bfb + "%" }}
              key={v.icon}
            >
              <div className="oneChart__item__text">
                <img
                  className={`icon${v.icon}`}
                  src={`/assets/image/${v.icon}${v.dw ? v.dw : ".svg"}`}
                />
                <span>
                  {v.value} {v.unit}
                </span>
              </div>
              {v.bfb}%
            </div>
          ))}
          <div className="twoChart__item__name">
            {systemProductionData.label}:<span className="nuxs">{totl1}</span>
            kWh
          </div>
        </div>
        <div className="twoChart">
          {filteredConsumption.map((v: any) => (
            <div
              className="twoChart__item"
              style={{ background: v.color, height: v.bfb + "%" }}
              key={v.icon}
            >
              <div className="twoChart__item__text">
                <img src={`/assets/image/${v.icon}.svg`} />
                <span>
                  {v.value} {v.unit}
                </span>
              </div>
              {v.bfb}%
            </div>
          ))}
          <div className="twoChart__item__name1">
            {consumptionData.label}:<span className="nuxs">{totl2}</span>
            kWh
          </div>
        </div>
      </div>
      <div className="CustomChart-legend">
        <div className="systemProductionData-legend">
          {systemProductionData.legend.map((v: any) => (
            <div
              className={`CustomChart-legend__item ${
                visibility[v] ? "" : "hidden"
              }`}
              onClick={() => handleLegendClick(v)}
              key={v}
            >
              <div
                className="yuan"
                style={{
                  background:
                    systemProductionData.data[
                      systemProductionData.legend.indexOf(v)
                    ].color,
                }}
              ></div>
              <span>{v}</span>
            </div>
          ))}
        </div>
        <div className="CustomChart-su"></div>
        <div className="consumptionData-legend">
          {consumptionData.legend.map((v: any) => (
            <div
              className={`CustomChart-legend__item ${
                visibility[v] ? "" : "hidden"
              }`}
              onClick={() => handleLegendClick(v)}
              key={v}
            >
              <div
                className="yuan"
                style={{
                  background:
                    consumptionData.data[consumptionData.legend.indexOf(v)]
                      .color,
                }}
              ></div>
              <span>{v}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ComponentName;
